<template>
    <div class="header">
        <div class="title">
            <router-link to='/'><i class="el-icon-back"></i></router-link>
            <input  placeholder="搜索本版内容"></input>
            <router-link to=''>我的问答</router-link>
        </div>

        <div class="scroll">
            <div class="img">
                <div class="img-one"></div>
                <div class="img-two"></div>
                <div class="img-three"></div>
            </div>
        </div>
    </div>


</template>

<script type="text/javascript">
    export default {
        name:'askHeader'
    }
</script>

<style type="text/css" scoped lang='less'>

.header{
    .title{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        padding: 1em 0;
        box-shadow: 0 0 10px 1px rgba(0,0,0,.3);
        a{
            color: #11BF79;
            text-decoration: none;
        }
        input{
            border:1px solid transparent;
            font-size:12px;
            height:25px;
            border-radius: 10px;
            outline:none;
            width:60%;
            padding-left:40px;
            background-color: #f0f0f0;
            background-image:url(../../assets/index/搜索.svg);
            background-repeat:no-repeat;
            background-size: contain;
            background-position: left 10px center;
        }

    }
    .scroll{
        .img{
            height: 90px;
            padding: 1em 0;
            overflow-y: hidden;
            overflow-x: scroll;
            white-space: nowrap;
            .img-one{
                background-image: url(../../assets/ask/3.jpg);
                color:#fff;
                // background-color: rgba(0,0,0,0.1);


            }
            .img-two{
                background-image: url(../../assets/ask/2.jpg);
            }
            .img-three{
                background-image: url(../../assets/ask/1.jpg);

            }
            .img-one,.img-two,.img-three{
                width: 160px;
                height: 90px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                border-radius:5px;
                margin:0 15px;
                display: inline-block;
                box-shadow: 0 5px 20px rgba(0,0,0,.1);

            }
        }
    }
}

</style>
